import {messages} from "share/common";
import React, {Component} from 'react';
import {Col, InputNumber, Row, Select} from "antd";

const Option = Select.Option;

class ClaimAmountVerificationRuleDetailExpenseAmount extends Component {

  moreThanRuleOptions = [
    {name: '<', key: 'LESS_THAN'},
    {name: '≤', key: 'LESS_THAN_OR_EQUALS'},
    {name: messages('expense-8.key407')/*无*/, key: 'NONE'}
  ];

  lessThanRuleOptions = [
    {name: '<', key: 'LESS_THAN'},
    {name: '≤', key: 'LESS_THAN_OR_EQUALS'},
    {name: '=', key: 'EQUALS'},
    {name: messages('expense-8.key407')/*无*/, key: 'NONE'}
  ];

  render() {
    const { disabled, value, onChange } = this.props;
    return (
      <Row className="verification-rule-detail-amount">
        <Col span={6} className="verification-rule-detail-amount-input">
          <InputNumber
            size="middle"
            min={0}
            precision={2}
            disabled={disabled}
            placeholder={messages('expense-8.key408')/*请输入金额*/}
            value={value.startValue}
            onChange={startValue => onChange(Object.assign({}, value, { startValue }))}
          />
        </Col>
        <Col span={4} className="verification-rule-detail-amount-select">
          <Select
            value={value.startComparedSymbol}
            onChange={startComparedSymbol => onChange(Object.assign({}, value, { startComparedSymbol }))}
          >
            {this.moreThanRuleOptions.map(item => <Option key={item.key}>{item.name}</Option>)}
          </Select>
        </Col>
        <Col span={4} className="verification-rule-detail-amount-text">{messages('expense-8.key45')/*费用金额*/}</Col>
        <Col span={4} className="verification-rule-detail-amount-select">
          <Select
            value={value.endComparedSymbol}
            onChange={endComparedSymbol => onChange(Object.assign({}, value, { endComparedSymbol }))}
          >
            {this.lessThanRuleOptions.map(item => <Option key={item.key}>{item.name}</Option>)}
          </Select>
        </Col>
        <Col span={6} className="verification-rule-detail-amount-input">
          <InputNumber
            size="middle"
            min={0}
            max={9999999999.99}
            precision={2}
            disabled={disabled}
            placeholder={messages('expense-8.key408')/*请输入金额*/}
            value={value.endValue}
            onChange={endValue => onChange(Object.assign({}, value, { endValue }))}
          />
        </Col>
      </Row>
    );
  }
}

export default ClaimAmountVerificationRuleDetailExpenseAmount;
